<template>
	<view class="myTicket">
		<template v-if="pacList.length > 0">
			<ul v-for="(item,index) in pacList" :key="index" class="ticket bg-line-color">
				<li class="name">{{item.productName}}</li>
				<li>订单号:{{item.tradeno}}</li>
				<li>下单时间:{{item.paymenTime}}</li>
				<li>数量:{{item.quantity}}</li>
				<li>订单金额:￥{{item.amount}}</li>
				<li>
					<view class="btn" v-if="item.canPay" @click="canPaySubmit(item)">支付</view>
				</li>
			</ul>
		</template>
		<view v-else style="margin-top:35vh">
			<uv-empty mode="order" icon="empty-favor"></uv-empty>
		</view>
		
	</view>
</template>

<script setup lang="ts">
import { getZtOrderList } from "@/api/order"
import {ref , getCurrentInstance} from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { setPaymethod } from "@/api/order"
import { useUCenterStore } from '@/stores/uCenter'
const store = useUCenterStore()
const canPaySubmit = (res : any) => {
    setPaymethod({
		openid:store.memberInfo.openid,
		paymethod:'wxminiPay',
		tradeno:res.tradeno
	}).then(payInfo => {
		if(payInfo.success){
			const info = payInfo.data
			uni.requestPayment({
				"provider": "wxpay",
				...info,
				success(res) {
					uni.redirectTo({url:'/pages/mall/paySuccess'})
				},
				fail(e) {
					uni.showToast(payInfo.msg)
				}
			})
		}else{
			uni.showToast(payInfo.msg)
		}
	})
}
const pacList = ref<any>([])
onLoad(async () => {
	const { proxy } = getCurrentInstance();
    await proxy.$onLaunched;
	getZtOrderList({page_no:1,per:50}).then(res => {
		pacList.value = res.data
	})
})
</script>

<style lang="scss" scoped>
	.myTicket{
	    width: 92%;
		margin: 0 auto;
		overflow: hidden;
		padding:32rpx 0;
	}
	.ticket{
		width:100%;
		margin-bottom:32rpx;
		padding:32rpx;
		box-sizing: border-box;
		border-radius: 9px;
		color:#fff;
		position: relative;
		.name{
			padding-bottom:16rpx;
			font-weight: 600;
		}
		.btn{
			width:160rpx;
			height:50rpx;
			line-height:50rpx;
			background:#fff;
			color:$uni-color-primary;
			text-align:center;
			border-radius:9px;
			position: absolute;
			bottom:32rpx;
			right:32rpx;
		}
	}
	
</style>